<script setup lang="ts">
import {onMounted, onUnmounted, reactive, ref} from "vue";
// import {getData} from "../data/KeyValueData.ts";
import {download} from '@tauri-apps/plugin-upload';
import {ElProgress, ElInput, ElButton, ElMessage} from "element-plus";
// import {Setting} from "../composables/AppConfig.ts";
import {DownloadProgress} from "../interface/DownloadProgress.ts";
import {invoke} from "@tauri-apps/api/core";

const downloadLink = ref('');
const downloadName = ref('');
const downloadList = ref<DownloadProgress[]>([]);
const UPDATE_INTERVAL = 500; // 500ms更新一次

const startDownload = (downloadLinkStr: string, downloadNameStr: string) => {
  //先对字符串判空
  if (downloadLinkStr) {
    invoke('get_current_path').then((val) => {

      const downloadPath = val as string + downloadNameStr;


      const headers = new Map<string, string>();
      headers.set('Accept', '*/*');
      const downloadProgressItem = reactive(new DownloadProgress(0, 0, headers, 0, 0))
      // const downloadProgressItem = new DownloadProgress(0, 0, headers, 0)
      downloadList.value.push(downloadProgressItem);
      // downloadList.value = downloadProgressItem;

      let lastUpdate = 0;

      download(
          downloadLinkStr,
          downloadPath,
          ({total, progressTotal}) => {
            if (downloadProgressItem.total !== total) {
              downloadProgressItem.total = total;
            }
            downloadProgressItem.current = progressTotal;
            const now = Date.now();
            // 值有变化且超过间隔时间才更新，避免频繁刷新页面影响性能
            if (now - lastUpdate > UPDATE_INTERVAL || progressTotal === total) {
              downloadProgressItem.progressPercentage = Math.floor((progressTotal / total) * 100);
              lastUpdate = now;
              console.log(`Progress: ${downloadProgressItem.progressPercentage}%`);
            }
            if (progressTotal === total) {
              downloadProgressItem.status = 1;
              ElMessage.info('下载完毕,文件路径为:' + downloadPath);
            }
            console.log(`Downloaded ${downloadProgressItem.progressPercentage} bytes`); // 下载进度时调用的回调函数
          },
          headers
      ).catch((_) => {
        downloadProgressItem.status = 2;
      });
    })
  } else {
    ElMessage.warning('请输入下载地址');
  }
}


onMounted(() => {

})

onUnmounted(() => {
})


</script>

<template>
  <div style="display: flex;justify-content: space-between">
    <el-input style="flex: 1" v-model="downloadLink" placeholder="输入需要下载的链接"></el-input>
    <el-input style="flex: 1" v-model="downloadName" placeholder="输入下载后的文件名"></el-input>
    <el-button type="primary" @click="startDownload(downloadLink,downloadName)">开始下载</el-button>
  </div>

  <div class="download">
    <div class="download_progress">
      <div class="download_name">
        下载文件名
      </div>
      <div v-for="(item) in downloadList">
        <el-progress :percentage="item.progressPercentage" :color="item.status === 1 ? '#67c23a' : '#909399'"/>
      </div>
    </div>
    <div class="download_info">
      <span class="download_file_location icon iconfont icon-kaishi download_icon_size">
      </span>
      <span class="download_file_location icon iconfont icon-shanchu download_icon_size">
      </span>
      <span class="download_file_delete icon iconfont icon-wenjian download_icon_size">
      </span>
    </div>
  </div>
</template>

<style scoped>

.download {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .download_progress {
    flex: 1;
    margin: 0 10px;

  }

  .download_info {
    margin-right: 10px;
  }

  .download_icon_size {
    margin-left: 10px;
    font-size: 16px;
  }

}
</style>